<template>
    <!-- This example requires Tailwind CSS v2.0+ -->
<nav class="bg-gray-800 fixed w-full z-40 h-16 box-border left-0 top-0">
  <div class="max-w-9xl mx-auto px-2 sm:px-6 lg:px-8">
    <div class="relative flex items-center justify-between h-16">
      <div class="absolute inset-y-0 left-0  flex items-center ">
        <!-- Mobile menu button-->
        <button @click="slideLeft" for="my-drawer"  type="button" class="inline-flex items-center justify-center   rounded-md text-gray-300 " aria-controls="mobile-menu" aria-expanded="false">
          <span class="sr-only">Open main menu</span>
          
          <svg class="block h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M4 6h16M4 12h16M4 18h16" />
          </svg>
          
        </button>
      </div>
      <div class="flex-1 flex items-center justify-center sm:items-stretch sm:justify-start">
        <div class="flex-shrink-0 flex items-center">
          <!-- <img class="block   h-8 w-auto" src="https://tailwindui.com/img/logos/workflow-mark-indigo-500.svg" alt="Workflow"> -->
          <div class="w-14"></div>
        <a href="/" class="block text-white h-8 items-center justify-center">
         <svg t="1641019653289" class="inline-block w-8 h-8 stroke-current" viewBox="0 0 1024 1024" version="1.1" xmlns="http://www.w3.org/2000/svg" p-id="2050" width="200" height="200"><path d="M512 512m-298.7 0a298.7 298.7 0 1 0 597.4 0 298.7 298.7 0 1 0-597.4 0Z" fill="#009F72" p-id="2051"></path><path d="M654.2 170.7m-85.3 0a85.3 85.3 0 1 0 170.6 0 85.3 85.3 0 1 0-170.6 0Z" fill="#F9DB88" p-id="2052"></path><path d="M862.9 427.8l-168.8-39c-0.4-0.1-0.7-0.3-0.9-0.6l-67.5-92.9c-0.7-16-6.8-31.8-18.4-44.5-26.4-29.1-71.4-31.2-100.4-4.8L350.4 388.3c-29.1 26.4-31.2 71.4-4.8 100.4 1.5 1.6 3 3.2 4.6 4.6 1 0.9 0.4 2.5-0.9 2.6L147.6 512c-11.8 0.9-20.5 11.2-19.6 23 0.9 11.2 10.2 19.6 21.2 19.6 0.6 0 1.2 0 1.7-0.1l263.4-21.1c0.3 0 0.7 0.1 0.9 0.2l95.6 61.5c0.8 0.5 0.9 1.5 0.3 2.2l-99.9 119.9c-5.6 6.7-9.3 14.3-11.4 22.2-0.2 0.9-1.1 1.4-2 1.1l-194.2-68.9c-29.6-10.5-62.1 5-72.6 34.6-10.5 29.6 5 62.1 34.6 72.6l440.9 156.4c6.1 2.2 12.5 3.3 19 3.3H696c31.3 0 57.3-24.9 57.7-56.1 0.4-31.8-25.2-57.6-56.9-57.6h-61.3l-125.8-44.6c-1-0.3-1.3-1.6-0.7-2.4l132-158.3c10.4-12.5 15-28.9 12.5-45.1-2.5-16.1-11.8-30.4-25.5-39.2l-22.3-14.3c-1.2-0.8-0.7-2.6 0.7-2.8l199.3-15.9h0.5l37.5 8.7c3.2 0.8 6.5 1.1 9.6 1.1 19.4 0 37-13.4 41.5-33.1 5.4-22.9-8.9-45.8-31.9-51.1z m-320.5 52.4l-46.2-29.7c-0.8-0.5-0.9-1.7-0.2-2.4l80.2-72.9c0.7-0.6 1.7-0.5 2.2 0.2l55.5 76.3c6 8.3 14.9 14.2 24.9 16.5 1.7 0.4 1.5 2.8-0.2 3l-115.3 9.2c-0.3 0-0.6 0-0.9-0.2z" fill="#F9DB88" p-id="2053"></path></svg>
           <span class="inline-block">   SnoGoGo</span>
        </a> 
        </div>
        <div class="mx-auto ">
          <div class="w-20 sm:w-98 lg:w-118"  >
            <!-- <div class="relative">
              <input type="text" placeholder="Search" class=" w-full pr-16 input  input-bordered text-white "> 
              <button class="absolute top-0 right-0 rounded-l-none btn ">
                 
              <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-6 h-6 mr-2 stroke-current" fill="none" viewBox="0 0 24 24" stroke="currentColor">
                  <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                </svg>
              Search
              </button>
              
            </div> -->
             <ul role="list" class="border-b border-gray-600">
                            <form  action="/search" method="get" class=" flex items-center justify-between text-sm">
                            <div class="w-0 flex-1 flex items-center">

                               
                                <span class=" flex-1 w-0 truncate">
                                 
                                   <input name="term" id="input_keywords" type="text" style="outline:0px;" placeholder="Search resorts, regions, pass programs, articles etc." class=" m-0 bg-gray-800 w-full h-10  text-gray-200" />
                                 
                                </span>
                            </div>
                            <div class="ml-4 flex-shrink-0">
                                <button type="submit"    class="font-medium tooltip tooltip-bottom " data-tip="Search" >
                                <svg xmlns="http://www.w3.org/2000/svg" class="inline-block w-6 h-6 text-gray-200 " fill="none" viewBox="0 0 24 24" stroke="currentColor">
                                <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
                                </svg>
                                </button>
                               
                            </div>
                            </form>
                             
                        </ul>
          </div>
        </div>
      </div>
      <div class=" inset-y-0 right-0 flex items-center  static  inset-auto  pr-0">
       
               
          <button type="button" class="sm:hidden bg-gray-800 p-2 m-2 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white margin-e">
          <span class="sr-only">Search</span>
          <!-- Heroicon name: outline/bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M21 21l-6-6m2-5a7 7 0 11-14 0 7 7 0 0114 0z" />
            </svg>
        </button>

       <label  v-if="!$store.state.user.uid" for="SnogogologinBox"  class="block px-4 py-2 text-white focus:outline-none" >LOGIN/SIGN UP</label>
   <!-- 登录后的信息 -->
         
        <label :for="$store.state.user.uid>0?'my-modal-topic':'SnogogologinBox'" class="btn btn-sm m-2 bg-gray-800" v-if="$store.state.user && $store.state.user.uid">
          <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" class="inline-block w-6 h-6 mr-2 stroke-current">   
         <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M11 5H6a2 2 0 00-2 2v11a2 2 0 002 2h11a2 2 0 002-2v-5m-1.414-9.414a2 2 0 112.828 2.828L11.828 15H9v-2.828l8.586-8.586z" />
        </svg>
           New Topic
        </label> 

        <a href="/dashboard/notifications"  v-if="$store.state.user && $store.state.user.uid" type="button" class="bg-gray-800 p-2 m-2 rounded-full text-gray-400 hover:text-white focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white indicator">
          <span class="sr-only">View notifications</span>
          <div class="indicator-item  badge badge-error" style="top:4px; right:4px" v-if="$store.state.user.noti_count">{{$store.state.user.noti_count}}</div> 
          <!-- Heroicon name: outline/bell -->
          <svg class="h-6 w-6" xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke="currentColor" aria-hidden="true">
            <path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M15 17h5l-1.405-1.405A2.032 2.032 0 0118 14.158V11a6.002 6.002 0 00-4-5.659V5a2 2 0 10-4 0v.341C7.67 6.165 6 8.388 6 11v3.159c0 .538-.214 1.055-.595 1.436L4 17h5m6 0v1a3 3 0 11-6 0v-1m6 0H9" />
          </svg>
        </a>

        <!-- Profile dropdown -->
        <div class="ml-3 relative" v-if="$store.state.user && $store.state.user.uid">
           
            <button @click="showUserMenu" type="button" class="bg-gray-800 flex   rounded-full focus:outline-none focus:ring-2 focus:ring-offset-2 focus:ring-offset-gray-800 focus:ring-white" id="user-menu-button" aria-expanded="false" aria-haspopup="true">
              <span class="sr-only">Open user menu</span>
              <!-- <img class="h-8 w-8 rounded-full" src="https://images.unsplash.com/photo-1472099645785-5658abf4ff4e?ixlib=rb-1.2.1&ixid=eyJhcHBfaWQiOjEyMDd9&auto=format&fit=facearea&facepad=2&w=256&h=256&q=80" alt=""> -->
             <div class="avatar" v-if="$store.state.user.picture"><div class="rounded-full w-8 h-8 shadow ring ring-gray-700" ><img  :src="$store.state.user.picture"></div></div>
             <div class="avatar placeholder" v-else><div class="bg-neutral-focus text-neutral-content rounded-full w-8 h-8" :style="'background-color:'+ $store.state.user['icon:bgColor']"><span>{{$store.state.user['icon:text']}}</span></div></div> 
                
            </button>
           

       
          <div v-if="userMenu"  @click="showUserMenu" class="origin-top-right absolute right-0 mt-2 w-48 z-50  rounded-md shadow-lg py-1 bg-white ring-1 ring-black ring-opacity-5 focus:outline-none" role="menu" aria-orientation="vertical" aria-labelledby="user-menu-button" tabindex="-1">
            <!-- Active: "bg-gray-100", Not Active: "" -->
            <a :href="'/uid/'+$store.state.user.uid" class="block px-4 py-2   text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-0">Your Profile</a>
            <a href="/dashboard/my-likes" class="block px-4 py-2   text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-1">Settings</a>
            <a   @click="logout" class="block px-4 py-2 cursor-pointer  text-gray-700" role="menuitem" tabindex="-1" id="user-menu-item-2">Sign out</a>
          </div>
        </div>
           
      </div>
    </div>
  </div>


</nav>
</template>
<script>
export default {
//  props: ['slideTpye','pl'],
   props: {
    
  },
 data() {

    return {
         userMenu:false
    }
},
 async mounted() {
       this.$nextTick(function () {
        // Code that will run only after the
        // entire view has been rendered
        //console.log("NavPc mounted nextTick")
      })
      // this.init();
      
      
  },
 created(){
    //console.log("NavPc created ")
 },
 beforeCreate(){
 //console.log("NavPc beforeCreate ")
 },
 methods: {
     async init(){
        if(this.$store.state.user.uid>0){
          return;
        }
        let res = await  this.$axios.get("snogogo_nuxt/api/userinfo");
        if(res.code>0){
          this.$tools.alert("error",res.code+":"+res.msg);
          return;
        }
        //console.log("userinfo:",res.data)
        if(res.data && res.data.uid){
          this.$store.commit("SET_USER",res.data)
        }
     },
     slideLeft(){
       //console.log("showBigSlideMenu",this)
       this.$emit('showBigSlideMenu');
     },
     async logout(){
       //this.$tools.showToast();
       let data = this.$store.state.data;
      //  //console.log("data:",data)
       let  res = await  this.$axios.get("snogogo_nuxt/api/logout");
       //this.$tools.hideToast();
       //console.log("res:",res)
       if(res.code>0 || typeof(res.code)=='string' ){
          this.$tools.alert("error", res.msg);
          return;
        }
        // //console.log(" this.user:", this.$store.state)
        let user = {uid:0}
        this.$store.commit("SET_USER",user)
     },
     showUserMenu(){
        this.userMenu = !this.userMenu;
     }
   }
}
</script>